<template>
    <div class="playlist">
        <h3>推荐歌单</h3>
       
        <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
            <li v-for="item in singerData" :key="item.id"
          @click="selectPlatList(item)"
            >
            <div class="cover">
                <img :src="item.coverImgUrl" alt="">
              
            </div>
            <span>{{item.name}}</span></li>
        </ul>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
// import BScroll from 'better-scroll'
export default{
    data(){
        return{
            singerData:[]
        }
    },
  created(){
    this.getsinger()
  },
    methods:{
        getsinger(){
            axios.get("http://171.220.242.237:3001/top/playlist?limit=20")
            .then(res =>{
                // console.log(res.data.playlists)
                this.singerData=res.data.playlists;
                // this.betterScrollHorizontal(this.singerData.length,160)
            })
              .catch(err => {
             console.error(err); 
              })
        },
        selectPlatList(item){
            const id=item.id
             this.$router.push({
                 path:`/playlistdetail/${id}`
             })
        }
    //     betterScrollHorizontal(num, itemWidth){
    //           let width = num * itemWidth;
    //   this.$refs.content.style.width = width + "px";
    //   this.$nextTick(() =>{
    //        this.scroll = new BScroll(this.$refs.wrapper,{
    //             click: true,
    //       startX: 0,
    //       scrollX: true,//横向为true
    //       scrollY: false,
    //        });
    //   })
    //      },
        
    },
    filters:{
        numFilter(value,num){
            return  parseFloat(value).toFixed(num);
           
        }
    },
  
   
}
</script>
<style scoped>
.playlist{
    width: 90%;
    margin: 0 auto;
}
.playlist>h3{
    text-align: left;
}
.wrapper{
    overflow: hidden;
}
/* 歌单样式 */
ul.content>li{
    display: inline-block;
    width:25%;
    vertical-align: top;
}
ul.content>li img{
    width: 90%; 
  
}
.cover{
    position: relative;
}
.cover>span{
    background:gray;
    position: absolute;
    right: 10px;
    bottom: 5px;
    border-radius: 20px;
    width: 100px;
    
}
ul.content>li>img>span{
    font-size: 12px;
    display: inline-block;
    width: 90%;
}
</style>
